<template>
  <div class="personal-page shopcar">
    <div class="pp-title">{{name}}</div>
    <div class="pp-content">
      <div class="xyd-tab">
        <ul class="xyd-tab-container">
          <li :class="tab == indexTab ? 'xyd-tab-active' : 'xyd-tab-item'"  v-for="tab in tabs" @click="changeTab(tab)">
            {{tab}}
          </li>
        </ul>
      </div>
      <div class="xyd-el-table1">
        <el-table
          ref="multipleTable"
          :data="tableData"
          :key="type"
          :border="false"
          v-loading.body="loading"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="50">
          </el-table-column>
          <el-table-column
            label="商品"
            width="350">
            <template scope="scope">
              <div class="t-b-item1 clearfix">
                <div class="t-b-i-left">
                  <img :src="scope.row.pic" />
                </div>
                <div class="t-b-i-right">
                  <div class="title">{{scope.row.title}}</div>
                  <div class="description">{{scope.row.intro | getSimpleText}}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="单价"
            width="100"
          >
            <template scope="scope">
              <span style="color:#E66306">{{ scope.row.unit_price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="quantity"
            label="数量"
            width="120"
          >
            <template scope="scope">
              <number-input
                :value="scope.row.quantity"
                :item="scope.row"
                :min="1"
                style="width:100px;"
                @num-change="handleChange"
              ></number-input>
            </template>
          </el-table-column>
          <el-table-column
            prop="sum"
            label="小计"
            width="100"
            show-overflow-tooltip>
            <template scope="scope">
              <span style="color:#E66306">{{ scope.row.total }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="option"
            label="操作"
            show-overflow-tooltip>
            <template scope="scope">
              <a href="javascript:;" style="color:#FF3030" @click="handleDelete(scope.row)">
                删除
              </a>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pp-c-bottom">
        <div>
          已选择 {{multipleSelection.length}} 件商品     总价：
          <span class="money">¥{{total}}</span>
        </div>
        <button class="gray-btn" @click="handleSubmit" :style="btnStyle" :disabled="this.multipleSelection.length == 0">去结算</button>
      </div>
    </div>
  </div>
</template>

<script>
  import { getShopCart, reduceShopCart, addShopCart, delShopCart } from 'api/shop'
  import NumberInput from 'views/components/numberInput'
  import book1 from '@/assets/mock_images/book1.png'
  export default {
    name: 'Listen',
    components: {
      NumberInput
    },
    computed: {
      btnStyle: {
        get() {
          return this.multipleSelection.length > 0 ? 'background-color:#EF7401' : ''
        }
      }
    },
    data() {
      return {
        book1,
        tabs: ['语典书城', '语典好物'],
        indexTab: '语典书城',
        type: 0,
        name: this.$route.name,
        loading: false,
        total: 0,
        multipleSelection: [],
        tableData: []
      }
    },
    created() {
      this.loading = true
      getShopCart({
        p: 0
      })
      .then(res => {
        console.log(res)
        this.loading = false
        this.tableData = res.data.item
      })
      .catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    methods: {
      fetchData() {
        this.tableData = []
        this.loading = true
        getShopCart({
          p: this.type
        })
        .then(res => {
          console.log(res)
          this.loading = false
          this.tableData = res.data.item
        })
        .catch(err => {
          this.loading = false
          console.log(err)
        })
      },
      changeTab(tab) {
        this.indexTab = tab
        this.type = this.tabs.indexOf(this.indexTab)
        this.fetchData()
      },
      handleChange(num, item) {
        console.log(num, item)
        if (num === -1) {
          this.loading = true
          reduceShopCart({
            pid: item.pid,
            p: this.type,
            pu: this.type === '1' ? item.price_unit : null
          })
          .then(res => {
            console.log(res)
            this.fetchData()
          })
          .catch(err => {
            console.log(err)
            location.reload()
          })
        } else if (num === 1) {
          this.loading = true
          addShopCart({
            pid: item.pid,
            p: this.type,
            pu: this.type === '1' ? item.price_unit : null
          })
          .then(res => {
            console.log(res)
            this.fetchData()
          })
          .catch(err => {
            console.log(err)
            location.reload()
          })
        }
      },
      handleDelete(item) {
        console.log(item)
        this.$confirm('商品将会被移除购物车, 是否继续?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          delShopCart({
            item: item.itemid,
            type: this.type
          })
          .then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          })
          .catch(() => {
            location.reload()
          })
        }).catch(() => {
          console.log('取消')
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.total = val.reduce((v, n) => Number(v) + Number(n.total), 0)
      },
      handleSubmit() {
        this.$router.push('/mall/shopcar/' + this.multipleSelection.map(v => v.itemid).join(',') + '?type=' + this.type)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '../../styles/mixin.scss';
.personal-page.shopcar{
  .pp-title{}
  .pp-content{
    padding: 20px 40px;
    padding-bottom: 80px;
    position: relative;
    .pp-c-bottom{
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50px;
      background-color: #eee;
      >div{
        position: absolute;
        right: 180px;
        top: 16px;
        .money{
          color: #E66306;
        }
      }
      >button{
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 170px;
        height: 50px;
        font-size: 16px;
      }
    }
    .el-table{
      border: none;
      .t-b-item1{
        padding: 20px 0;
        .t-b-i-left{
          float: left;
          >img{
            width: 90px;
          }
        }
        .t-b-i-right{
          float: left;
          width: 200px;
          margin-left: 15px;
          .title{
            color: #333;
            font-weight: 700;
            @include ellipsisLn(2)
          }
          .description{
            color: #666;
            font-size: 12px;
            line-height: 20px;
            @include ellipsisLn(4)
          }
        }
      }
      th{
        background-color: #fff;
        .cell{
          background-color: #fff;
        }
      }
      &:after{
        width: 0px;
      }
    }
  }
}
</style>